import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { t } from '@/i18n';
import { api, isNotBuilt, safe } from '@/lib/api';
import { formatDate } from '@/lib/format';
import { jsonLd, seoTitle } from '@/lib/seo';
import { routes } from '@/lib/site';
import { STORIES, storyBySlug, storyChartCount, storyIndicators } from '@/lib/stories';
import { topicById } from '@/lib/topics';
import { NotBuiltState } from '@/components/data/empty-state';
import { PageHeader } from '@/components/explore/page-header';
import { JsonLd } from '@/components/platform/json-ld';
import { loadStoryData } from '@/components/stories/resolve';
import { StoryBlocks } from '@/components/stories/story-blocks';

export const revalidate = 3600;

type Params = { slug: string };

export function generateStaticParams(): Params[] {
  return STORIES.map((s) => ({ slug: s.slug }));
}

export async function generateMetadata({ params }: { params: Promise<Params> }): Promise<Metadata> {
  const { slug } = await params;
  const s = storyBySlug(slug);
  if (!s) return { title: t('stories.notFound'), robots: { index: false } };
  const title = seoTitle.story(s.title);
  const canonical = routes.story(s.slug);
  return {
    title,
    description: s.standfirst,
    alternates: { canonical },
    openGraph: { title: `${title} — ${t('site.name')}`, description: s.standfirst, url: canonical, type: 'article', publishedTime: s.published },
    twitter: { card: 'summary_large_image', title, description: s.standfirst },
  };
}

export default async function StoryPage({ params }: { params: Promise<Params> }) {
  const { slug } = await params;
  const story = storyBySlug(slug);
  if (!story) notFound();
  let health;
  try {
    health = await api.health();
  } catch (e) {
    if (isNotBuilt(e)) return <NotBuiltState />;
    throw e;
  }
  if (health.status === 'empty') return <NotBuiltState />;
  const data = await loadStoryData(story);
  const indicators = storyIndicators(story);
  const indicatorRes = await Promise.all(indicators.map((s) => safe(api.indicatorMap(s, {}))));
  const indicatorNames = indicators.map((s, i) => ({ slug: s, name: indicatorRes[i]?.indicator.name ?? s }));
  const sources = Array.from(new Set(indicatorRes.map((m) => m?.provenance?.source_name).filter((x): x is string => !!x)));
  const others = STORIES.filter((s) => s.slug !== story.slug);
  const topics = story.topics.map((tp) => topicById(tp)?.short ?? tp);

  return (
    <>
      <JsonLd data={[jsonLd.article({ slug: story.slug, title: story.title, description: story.standfirst, published: story.published, modified: health.built_at }), jsonLd.breadcrumbs([{ name: t('site.name'), path: '/' }, { name: t('stories.title'), path: routes.stories() }, { name: story.title, path: routes.story(story.slug) }])]} />
      <PageHeader crumbs={[{ href: routes.stories(), label: t('stories.title') }]} eyebrow={`${t('stories.eyebrow')} · ${topics.join(' · ')}`} title={story.title} lede={story.standfirst} meta={`${t('stories.charts', { n: storyChartCount(story) })} · ${t('stories.minutes', { n: Math.max(2, Math.round(storyChartCount(story) * 0.8)) })} · ${t('site.footer.refreshed', { date: formatDate(health.built_at) })}`} />

      <article className="mt-4 md:mt-6">
        <StoryBlocks story={story} data={data} />
      </article>

      <section className="hairline mt-12 pt-6" aria-labelledby="story-sources-h">
        <h2 id="story-sources-h" className="display text-xl text-ink md:text-2xl">
          {t('stories.sources')}
        </h2>
        <p className="mt-2 max-w-prose text-sm leading-relaxed text-ink-2">{t('stories.sourcesNote', { run: health.run_id ?? '', date: formatDate(health.built_at) })}</p>
        {sources.length ? <p className="mt-1 text-sm text-ink-2">{sources.join(' · ')}</p> : null}
        <h3 className="mt-4 text-sm font-semibold text-ink">{t('stories.indicators')}</h3>
        <ul className="mt-1 flex flex-wrap gap-1.5">
          {indicatorNames.map((i) => (
            <li key={i.slug}>
              <Link href={routes.indicator(i.slug)} className="inline-flex min-h-[36px] items-center rounded-sm border border-rule px-2.5 text-sm text-ink-2 hover:border-accent hover:text-accent">
                {i.name}
              </Link>
            </li>
          ))}
        </ul>
        <h3 className="mt-5 text-sm font-semibold text-ink">{t('stories.method')}</h3>
        <p className="mt-1 max-w-prose text-sm leading-relaxed text-ink-3">{t('stories.methodText')}</p>
      </section>

      <section className="hairline mt-10 pt-6 pb-10" aria-labelledby="story-more-h">
        <h2 id="story-more-h" className="display text-xl text-ink md:text-2xl">
          {t('stories.more')}
        </h2>
        <ul className="mt-3 grid gap-x-8 sm:grid-cols-2 lg:grid-cols-3">
          {others.map((s) => (
            <li key={s.slug} className="border-t border-rule">
              <Link href={routes.story(s.slug)} className="group flex min-h-[64px] flex-col justify-center py-3">
                <span className="text-sm font-semibold text-ink group-hover:text-accent">{s.title}</span>
                <span className="mt-0.5 line-clamp-2 text-xs text-ink-2">{s.standfirst}</span>
              </Link>
            </li>
          ))}
        </ul>
      </section>
    </>
  );
}